import { CSSProperties, useEffect, useState } from 'react';
import { Tabs, Tree } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import type { DirectoryTreeProps } from 'antd/lib/tree';
import styles from './types.less';
import {getClassificationListData} from "@/pages/Dashboard/Knowledge/service";

const { TabPane } = Tabs;
const Types = ({
                   bodyStyle,
                   nodeKeys,
                   setNodeKeys,
}: {
    bodyStyle?: CSSProperties;
    nodeKeys?:string[];
    setNodeKeys?:(node:any)=>void;
}) => {
    return (
        <div className={styles.wrapper}>
            <Tabs type="card">
                <TabPane tab="知识体系" style={{ ...bodyStyle }}>
                    <TypeTree nodeKeys={nodeKeys} setNodeKeys={setNodeKeys}/>
                </TabPane>
            </Tabs>
        </div>
    );
};

const TypeTree = ({
                      nodeKeys,
                      setNodeKeys,
}: {
    nodeKeys?:string[];
    setNodeKeys?:(node:any)=>void;
}) => {
    const [treeData, setTreeData] = useState<any[]>([]);
    const [ defaultSelectedKeys,setDefaultSelectedKeys ] = useState<string[]>([]);

    useEffect(() => {
        if(nodeKeys && nodeKeys.length>0){
            setDefaultSelectedKeys(nodeKeys);
            setNodeKeys?.(nodeKeys);
        }
    }, [nodeKeys]);

    useEffect(()=>{
        getClassificationList();
    },[])

    //获取目录树结构，使其与组件可识别的结构一致
    const getSedTree = (data?: AircasKB.Knowledge.classificationListResponse[]) => {
        let office = data?.map(item => {
            // @ts-ignore
            const result:any = {
                title:item.name,
                value:item.code,
                key:item.code,
                children:getSedTree(item.childList)
            }
            return result
        })
        return office
    }

    const getClassificationList = () => {
        getClassificationListData({
            parentId:"",
            parentIds:""
        }).then((res)=>{
            if(res.code == 200){
                setTreeData(getSedTree(res.data) || []);
            }
        })
    }

    const _onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
        setNodeKeys?.(keys);
    };

    // const onCheck: DirectoryTreeProps['onCheck'] = (keys) => {
    //     setNodeKeys?.(keys);
    //     // console.log(keys);
    // };

    if(treeData.length>0){
        return (
            <Tree
                showLine={{ showLeafIcon: false }}
                blockNode
                // checkable
                switcherIcon={<DownOutlined />}
                treeData={treeData.length>0 && treeData || []}
                // onCheck={onCheck}
                onSelect={_onSelect}
                multiple={true}
                // defaultCheckedKeys={defaultSelectedKeys}
                defaultSelectedKeys={defaultSelectedKeys}
                defaultExpandedKeys={['0001',"0002","0003"]}
                style={{ width: '100%' }}
            ></Tree>
        );
    }
    else{
        return  null;
    }

};

export default Types;
